<template>
	<div class="smalltalk_page">
		<NewsHeader 
			:isInput="dataArr.isInput" 
			:iconArr="dataArr.iconArr" 
			:placeholder="dataArr.placeholder" 
			:aimUrl = 'dataArr.aimUrl'
			:rightUrl='dataArr.rightUrl'
		/>
		<div class="smalltalkCont">
			<div class="smalltalkContTitle">
				<i class="iconfont icon-sousuo"></i>
				<router-link to='/nearagent'>
					<input type="text" placeholder="查找经纪人/聊天记录">
				</router-link>
			</div>
			<div class="smalltalkDetail">
				<div class="smalltalkSwiper">
					<template>
					  	<swiper :options="swiperOption" ref="mySwiper">
					    <!-- slides -->
						    <swiper-slide v-for='(item,index) in smalltalkArr' :key='index'>
						    	<div class="smallTalkText">
						    		<img :src="item.agentImgUrl" alt="">
						    		<span>{{ item.agentName }}</span>
						    		<span>宜居地产</span>
						    		<img :src="item.starsImgUrl" alt="">
						    		<span>主营 {{ item.workRange }}</span>
						    		<span>覆盖{{ item.houseNum }}个小区</span>
						    		<span>
						    			<router-link to="/broker">微聊</router-link>
						    		</span>
						    	</div>
						    </swiper-slide>
						    <!-- Optional controls -->
						    	<div class="swiper-pagination "  slot="pagination"></div>
					    </swiper>
					</template>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
import NewsHeader from '../../components/shopheader'

	export default{
		name:'smalltalk_page',
		components:{
			NewsHeader,
		},
		data(){
			return{
					dataArr:{
						isInput:false,
						iconArr:[
							{
								iconLeft:"icon-zuojiantou",
								iconRight:"icon-jiahaoyou"
							}
						],
						placeholder:"微聊",
						aimUrl:'/layout/mine',
						rightUrl:'/movie_ment'
					},
					swiperOption: {
          				// autoplay:true,
          				pagination: {
    						el: '.swiper-pagination',
    						 clickable :true
  						},

        			},
        			smalltalkArr:[
        				{
        					agentImgUrl:require('../../assets/images/mine/img_touxiangweiliao@2x.png'),
        					agentName:'刘杨',
        					starsImgUrl:require('../../assets/images/mine/img_starfive@2x.png'),
        					workRange:'育新-回龙观',
        					houseNum:'57'
        				},{
        					agentImgUrl:require('../../assets/images/mine/img_touxiangweiliao@2x.png'),
        					agentName:'刘杨',
        					starsImgUrl:require('../../assets/images/mine/img_starfive@2x.png'),
        					workRange:'育新-回龙观',
        					houseNum:'57'
        				},{
        					agentImgUrl:require('../../assets/images/mine/img_touxiangweiliao@2x.png'),
        					agentName:'刘杨',
        					starsImgUrl:require('../../assets/images/mine/img_starfive@2x.png'),
        					workRange:'育新-回龙观',
        					houseNum:'57'
        				},{
        					agentImgUrl:require('../../assets/images/mine/img_touxiangweiliao@2x.png'),
        					agentName:'刘杨',
        					starsImgUrl:require('../../assets/images/mine/img_starfive@2x.png'),
        					workRange:'育新-回龙观',
        					houseNum:'57'
        				},{
        					agentImgUrl:require('../../assets/images/mine/img_touxiangweiliao@2x.png'),
        					agentName:'刘杨',
        					starsImgUrl:require('../../assets/images/mine/img_starfive@2x.png'),
        					workRange:'育新-回龙观',
        					houseNum:'57'
        				},{
        					agentImgUrl:require('../../assets/images/mine/img_touxiangweiliao@2x.png'),
        					agentName:'刘杨',
        					starsImgUrl:require('../../assets/images/mine/img_starfive@2x.png'),
        					workRange:'育新-回龙观',
        					houseNum:'57'
        				},
        			]
			}
		}
	}
</script>
<style scoped lang="less">
.smalltalk_page{
	width: 100%;
	min-height: 1334 / 100rem;
	padding-top: 88 / 100rem;
	background-color: #ededed;
	box-sizing: border-box;
	.smalltalkCont{
		width: 100%;
		height: 100%;
		.smalltalkContTitle{
			margin-right: 48 / 100rem;
			margin-left: 48 / 100rem;
			margin-top: 20 / 100rem;
			background-color: #fff;
			border: none;
			border-radius: 8 / 100rem;
			position: relative;
			i{
				font-size: 40 / 100rem;
				position: absolute;
				top:23 / 100rem;
				left:124 / 100rem;
			}
			input{
				width: 654 / 100rem;
				height: 80 / 100rem;
				border: none;
				outline: none;
				border-radius: 8 / 100rem;
				text-indent: 180 / 100rem;
				font-size: 30 / 100rem;
				font-weight: 600;
			}

		}
		.smalltalkDetail{
			margin-top: 302 / 100rem;
			.smalltalkSwiper{
				.smallTalkText{
					width: 396 / 100rem;
					height: 500 / 100rem;
					border: 1px solid #cacaca;
					margin-left: 178 / 100rem;
					margin-right: 178 / 100rem;
					margin-top: 57 / 100rem;
					background-color: #fff;
					margin-bottom: 151 / 100rem;
					text-align: center;
					position: relative;
					img{
						display: block;
					}
					img:nth-child(1){
						width: 99 / 100rem;
						height: 98 / 100rem;
						margin-left: 146 / 100rem;
						position: absolute;
						top:-57 / 100rem; 
					}
					span:nth-child(2){
						margin-top: 100 / 100rem;
						font-size: 36 / 100rem;
						color: rgba(0, 0, 0, 0.8);
						font-weight: 600;
					}
					span:nth-child(3){
						margin-top: 15 / 100rem;
						margin-bottom: 15 / 100rem;
						font-size: 30 / 100rem;
						font-weight: 600;
						color: #000000;
					}
					img:nth-child(4){
						width: 184 / 100rem;
						height: 40 / 100rem;
						margin-left: 110 / 100rem;
						margin-bottom: 15 / 100rem;
					}
					span:nth-child(5),span:nth-child(6){
						margin-bottom: 15 / 100rem;
						font-size: 26 / 100rem;
						color: rgba(0, 0, 0, 0.8);
					}
					span:nth-child(7){
						margin-top: 40 / 100rem;
						margin-left: 82 / 100rem;
						width: 229 / 100rem;
						height: 54 / 100rem;
						border: 3 / 100rem solid #ff5555;
						color: rgba(0, 0, 0, 0.8);
						font-size: 26 / 100rem;
						font-weight: 600;
						border-radius: 8 / 100rem;
						text-align: center;
						line-height: 54 / 100rem;
					}
					span{
						display: block;
					}
				}
			}
		}
	}
}		
</style>